<!-- 套餐列表 -->
<template>
  <div class="DealerInfoStyle">
    <div class="cardAdmin">
      <div class="formContainer">
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
          <el-input style="flex: 3;" v-model="form.service_name_zh_tw"></el-input>
        </div>
        <div style="position: absolute;left: 10px;bottom: 5px;">
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="addbtn()">新增套餐</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="CompanyTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">
      <el-table-column resizable prop="service_id" label="id" width="60" align="center">
      </el-table-column>
      <el-table-column resizable prop="service_price" label="服务价格" width="auto" min-width="100px" align="center">
      </el-table-column>
      <el-table-column resizable prop="service_month" label="时间/月" width="auto" min-width="80px" align="center">
      </el-table-column>
      <el-table-column resizable prop="service_type" label="套餐类型" width="auto" min-width="120px" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.service_type == 1">港股打新會員套餐</span>
          <span v-if="scope.row.service_type == 2">港美股黃金套餐</span>
          <span v-if="scope.row.service_type == 3">美股期權套利策略</span>
          <span v-if="scope.row.service_type == 4">美股ETF套利策略</span>
        </template>
      </el-table-column>
      <el-table-column resizable prop="enable" label="启用" width="auto" min-width="120px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.enable == 1 ? '已启用' : '未启用' }}</span>
        </template>
      </el-table-column>
      <el-table-column resizable prop="service_name_zh_tw" label="服务名字-繁体" width="auto" min-width="200px" align="center">
      </el-table-column>
      <!-- <el-table-column resizable prop="service_content_zh_tw" label="服务内容-繁体" width="auto" min-width="200px"
        align="center">
      </el-table-column> -->
      <!-- <el-table-column resizable prop="service_name_zh_cn" label="服务名字-简体" width="auto" min-width="200px" align="center">
      </el-table-column>

      <el-table-column resizable prop="service_name_en" label="服务名字-英语" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column resizable prop="service_name_ja" label="服务名字-日语" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column resizable prop="service_name_ko" label="服务名字-韩语" width="auto" min-width="200px" align="center">
      </el-table-column>


      <el-table-column resizable prop="service_content_en" label="服务内容-英语" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column resizable prop="service_content_ja" label="服务内容-日语" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column resizable prop="service_content_ko" label="服务内容-韩语" width="auto" min-width="200px" align="center">
      </el-table-column> -->

      <el-table-column resizable prop="img_1" label="图片1" width="auto" min-width="120px" align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px;height:20px" :src="'' + scope.row.img_1"
            :preview-src-list="['' + scope.row.img_1]">
            <div slot="error" class="image-slot" style="width: 50px;">
              <div style="width: 50px;">{{ scope.row.img_1 == '' ? '加载失败' : '空图片或者地址错误' }}</div>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column resizable prop="img_2" label="图片2" width="auto" min-width="120px" align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px;height:20px" :src="'' + scope.row.img_2"
            :preview-src-list="['' + scope.row.img_2]">
            <div slot="error" class="image-slot" style="width: 50px;">
              <div style="width: 50px;">{{ scope.row.img_2 == '' ? '加载失败' : '空图片或者地址错误' }}</div>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column resizable prop="img_3" label="图片3" width="auto" min-width="120px" align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px;height:20px" :src="'' + scope.row.img_3"
            :preview-src-list="['' + scope.row.img_3]">
            <div slot="error" class="image-slot" style="width: 50px;">
              <div style="width: 50px;">{{ scope.row.img_3 == '' ? '加载失败' : '空图片或者地址错误' }}</div>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column resizable label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="tableEditing(scope.row)" type="primary" plain size="small">编辑</el-button>
          <el-button @click="del_subscriptionServiceDeletion(scope.row.service_id)" type="danger" plain
            size="small">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 5px;">
      <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
        @current-change="current_change"></el-pagination>
    </div>

    <!-- 弹窗 -->
    <el-dialog :close-on-click-modal="false" :title="titles" :visible.sync="dialogVisible" width="80%"
      @close="handleClose" top="15vh">
      <div class="pop-up-form">
        <div class="pop-up-form">
          <div style="display: flex;width: 100%;">
            <div class="form-options" style="flex: 1;display: flex;">
              <span
                style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">服务名称-简体：</span>
              <el-input style="flex: 6;" v-model="addform.service_name_zh_cn"></el-input>
            </div>
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">
                服务内容-简体：</span>
              <el-input style="flex: 6;" v-model="addform.service_content_zh_cn"></el-input>
            </div>
          </div>
        </div>
        <div class="pop-up-form">
          <div style="display: flex;width: 100%;">
            <div class="form-options" style="flex: 1;display: flex;">
              <span
                style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">服务名称-繁体：</span>
              <el-input style="flex: 6;" v-model="addform.service_name_zh_tw"></el-input>
            </div>
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">
                服务内容-繁体：</span>
              <el-input style="flex: 6;" v-model="addform.service_content_zh_tw"></el-input>
            </div>
          </div>
        </div>
        <div class="pop-up-form">
          <div style="display: flex;width: 100%;">
            <div class="form-options" style="flex: 1;display: flex;">
              <span
                style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">服务名称-日语：</span>
              <el-input style="flex: 6;" v-model="addform.service_name_ja"></el-input>
            </div>
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">
                服务内容-日语：</span>
              <el-input style="flex: 6;" v-model="addform.service_content_ja"></el-input>
            </div>
          </div>
        </div>
        <div class="pop-up-form">
          <div style="display: flex;width: 100%;">
            <div class="form-options" style="flex: 1;display: flex;">
              <span
                style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">服务名称-韩语：</span>
              <el-input style="flex: 6;" v-model="addform.service_name_ko"></el-input>
            </div>
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">
                服务内容-韩语：</span>
              <el-input style="flex: 6;" v-model="addform.service_content_ko"></el-input>
            </div>
          </div>
        </div>
        <div class="pop-up-form">
          <div style="display: flex;width: 100%;">
            <div class="form-options" style="flex: 1;display: flex;">
              <span
                style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">服务名称-英文：</span>
              <el-input style="flex: 6;" v-model="addform.service_name_en"></el-input>
            </div>
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">
                服务内容-英文：</span>
              <el-input style="flex: 6;" v-model="addform.service_content_en"></el-input>
            </div>
          </div>
        </div>

        <div class="pop-up-form">
          <div style="display: flex;width: 100%;">
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">是否启用：</span>
              <el-switch style="flex: 6;height: 40px;" v-model="addform.enable" active-text="是" :active-value="1"
                :inactive-value="0" inactive-text="否"></el-switch>
            </div>
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">
                服务价格：</span>
              <el-input style="flex: 6;" v-model="addform.service_price"></el-input>
            </div>
          </div>
        </div>
        <div class="pop-up-form">
          <div style="display: flex;width: 100%;">
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">套餐类型：</span>
              <el-select style="flex: 6;height: 40px;" v-model="addform.service_type" placeholder="请选择套餐类型">
                <el-option label="港股打新會員套餐" :value="1"></el-option>
                <el-option label="港美股黃金套餐" :value="2"></el-option>
                <el-option label="美股期權套利策略" :value="3"></el-option>
                <el-option label="美股ETF套利策略" :value="4"></el-option>
              </el-select>
            </div>
            <div class="form-options" style="flex: 1;display: flex;">
              <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">
                服务期限：</span>
              <el-input style="flex: 6;" v-model="addform.service_month"></el-input>
            </div>
          </div>
        </div>
        <div class="pop-up-form">
          <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
            <div style="flex: 1;display: flex;">
              <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">图1：</span>
              <input style="flex: 6;line-height: 40px;" type="file" ref="fileInput1" id="roleHeadgear1" accept="image/*"
                @change="handleFileChange1" required />

            </div>
            <div style="display: flex;flex: 1;">
              <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">图2：</span>
              <input style="flex: 6;line-height: 40px;" type="file" ref="fileInput2" id="roleHeadgear2" accept="image/*"
                @change="handleFileChange2" required />
            </div>
            <div style="display: flex;flex: 1;">
              <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">图3：</span>
              <input style="flex: 6;line-height: 40px;" type="file" ref="fileInput3" id="roleHeadgear3" accept="image/*"
                @change="handleFileChange3" required />
            </div>
          </div>
        </div>



        <div class="form-options" style="">

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button v-show="titles == '新增'" type="primary" @click="add_addSubscriptionService()" size="small">确
          定</el-button>
        <el-button v-show="titles == '编辑'" type="primary" @click="upd_subscriptionServiceEditor()" size="small">更
          新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { subscriptionServiceList, addSubscriptionService, subscriptionServiceEditor, subscriptionServiceDeletion } from "@/utils/api";
export default {
  name: 'CompanyInfo',
  data() {
    return {
      form: {
        service_name_zh_tw: ''
      },
      addform: {
        service_name_ja: '',
        service_name_ko: '',
        service_name_en: '',
        service_name_zh_tw: '',
        service_content_ja: '',
        service_content_ko: '',
        service_content_en: '',
        service_content_zh_tw: '',
        service_name_zh_cn: '',
        service_content_zh_cn: '',

        enable: 0,
        service_price: '',
        service_type: '',
        service_month: '',

      },
      CompanyTable: [],
      dialogVisible: false,
      total: 100, //总条数
      pagesize: 10, //指定展示多少条
      currentPage: 1, //当前页码
      titles: '',
      roleHeadgear3: null,
      roleHeadgear1: null,
      roleHeadgear2: null,

    };
  },
  mounted() {
    this.get_subscriptionServiceList()
  },

  methods: {
    handleFileChange1(event) {
      this.roleHeadgear1 = event.target.files[0];
      if (this.roleHeadgear1) {
        this.$message.success('上传成功')
      }
    },
    handleFileChange2(event) {
      this.roleHeadgear2 = event.target.files[0];
      if (this.roleHeadgear2) {
        this.$message.success('上传成功')
      }
    },
    handleFileChange3(event) {
      this.roleHeadgear3 = event.target.files[0];
      if (this.roleHeadgear3) {
        this.$message.success('上传成功')
      }
    },
    // 查询套餐列表
    async get_subscriptionServiceList() {
      let data = {}
      data.page = this.currentPage

      // 删除值为 "" 或 null 的字段
      Object.entries(data).forEach(([key, value]) => {
        if (value === "" || value === null) {
          delete data[key];
        }
      });

      const res = await subscriptionServiceList(data).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.CompanyTable = res.data.data.data
        this.total = res.data.data.total
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 新增套餐
    async add_addSubscriptionService() {
      let data = new FormData();

      for (let key in this.addform) {
        if (Object.prototype.hasOwnProperty.call(this.addform, key)) {
          let value = this.addform[key];
          // 判断值是否为 null 或 undefined
          if (value !== null && value !== undefined && value !== '') {
            data.append(key, value);
          }
        }

      }
      if (this.roleHeadgear1) {
        data.append('img_1', this.roleHeadgear1);
      }
      if (this.roleHeadgear2) {
        data.append('img_2', this.roleHeadgear2);
      }
      if (this.roleHeadgear3) {
        data.append('img_3', this.roleHeadgear3);
      }

      const res = await addSubscriptionService(data).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.get_subscriptionServiceList()
        this.dialogVisible = false
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 更新套餐
    async upd_subscriptionServiceEditor() {
      let data = new FormData();

      for (let key in this.addform) {
        if (Object.prototype.hasOwnProperty.call(this.addform, key)) {
          let value = this.addform[key];
          // 判断值是否为 null 或 undefined
          if (value !== null && value !== undefined && value !== '') {
            data.append(key, value);
          }
        }
      }
      data.delete('service_id')
      if (this.roleHeadgear1) {
        data.append('img_1', this.roleHeadgear1);
      }
      if (this.roleHeadgear2) {
        data.append('img_2', this.roleHeadgear2);
      }
      if (this.roleHeadgear3) {
        data.append('img_3', this.roleHeadgear3);
      }

      const res = await subscriptionServiceEditor(data, this.addform.service_id).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.dialogVisible = false
        this.get_subscriptionServiceList()
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 刪除套餐
    async del_subscriptionServiceDeletion(id) {
      try {
        await this.$confirm("是否继续执行操作？", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        });

        let data = { id };
        const res = await subscriptionServiceDeletion(data).catch((err) => {
          return console.error(err);
        });

        if (res.data && res.data.code == "200") {
          this.$message.success(res.data.message);
          this.dialogVisible = false;
          this.get_subscriptionServiceList();
        } else {
          this.$message.error(res.data.message);
        }
      } catch (error) {
        // 用户点击取消或关闭对话框
        console.error(error);
      }
    },
    // 关闭弹窗时
    handleClose() {
      this.addform = {
        service_name_ja: '',
        service_name_ko: '',
        service_name_en: '',
        service_name_zh_tw: '',
        service_content_ja: '',
        service_content_ko: '',
        service_content_en: '',
        service_content_zh_tw: '',
        enable: 0,
        service_price: '',
        service_type: '',
        service_month: '',
        service_name_zh_cn: '',
        service_content_zh_cn: '',
      }
      this.$refs.fileInput1.value = null;
      this.$refs.fileInput2.value = null;
      this.$refs.fileInput3.value = null;
    },
    handleClosetable() {

    },
    // 分页
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.get_subscriptionServiceList();
    },
    // 重置
    resetForm() {
      this.form = {
        service_name_zh_tw: ''
      }
      this.currentPage = 1
      this.get_subscriptionServiceList();
    },
    // 编辑打开时
    tableEditing(row) {
      this.titles = '编辑'
      this.dialogVisible = true
      const isTrue = (value) => {
        if (value == null || value == undefined || value === "null" || value === "undefined") {
          return false;
        }
        return true;
      };
      if (isTrue(row.service_name_ja)) {
        this.addform.service_name_ja = row.service_name_ja
      }
      if (isTrue(row.service_name_ko)) {
        this.addform.service_name_ko = row.service_name_ko
      }
      if (isTrue(row.service_name_en)) {
        this.addform.service_name_en = row.service_name_en
      }
      if (isTrue(row.service_name_zh_tw)) {
        this.addform.service_name_zh_tw = row.service_name_zh_tw
      }
      if (isTrue(row.service_content_ja)) {
        this.addform.service_content_ja = row.service_content_ja
      }
      if (isTrue(row.service_content_ko)) {
        this.addform.service_content_ko = row.service_content_ko
      }
      if (isTrue(row.service_name_zh_cn)) {
        this.addform.service_name_zh_cn = row.service_name_zh_cn
      }
      if (isTrue(row.service_content_zh_cn)) {
        this.addform.service_content_zh_cn = row.service_content_zh_cn
      }

      if (isTrue(row.service_content_en)) {
        this.addform.service_content_en = row.service_content_en
      }
      if (isTrue(row.service_content_zh_tw)) {
        this.addform.service_content_zh_tw = row.service_content_zh_tw
      }
      if (isTrue(row.service_price)) {
        this.addform.service_price = row.service_price
      }
      if (isTrue(row.service_type)) {
        this.addform.service_type = row.service_type
      }
      if (isTrue(row.service_month)) {
        this.addform.service_month = row.service_month
      }
      if (isTrue(row.enable)) {
        this.addform.enable = row.enable
      }
      this.addform.service_id = row.service_id
    },
    // 新增打开时
    addbtn() {
      this.dialogVisible = true;
      this.titles = '新增'
    },
  },
};
</script>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

.el-dialog__body {
  padding: 0 10px !important;
}

.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style lang="less" scoped>
.DealerInfoStyle {
  width: 100%;
  padding: 0 10px;
  // background-color: aquamarine;
  height: calc(100vh - 100px);
  // border: 1px #000 solid;

  .cardAdmin {
    position: relative;
    // height: 18%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;

    border: #ebeef5 solid 1px;
    padding: 0 5px;
    margin-bottom: 2px;


    .formContainer {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      align-self: baseline;
      padding-bottom: 40px;
    }

    .formSearch {
      width: 25%;
      min-width: 25%;
      margin: 10px 0;
      height: 40px;
      display: flex;
      justify-content: center;
    }
  }

  .pop-up-form {
    // width: 100%;
    // display: flex;
    // flex-wrap: wrap;
    // padding: 0;
    // align-self: baseline;
    // margin: 10px 0;
    // justify-content: center;
    // padding-right: 15px;
    margin: 10px 5px;
    // .form-options {
    //   width: 100%;
    //   min-width: 100%;
    //   height: 40px;
    //   display: flex;
    //   justify-content: center;
    //   margin: 10px 0;
    // }
  }
}
</style>
